import React from 'react';
import ReactDOM from 'react-dom';
import mirror, {actions, connect,Link} from 'mirrorx';
import { createForm } from 'rc-form';
import { List, InputItem, WhiteSpace, WingBlank, Button,Checkbox,Picker,Flex,Tabs,Modal,Icon, Radio ,Slider } from 'antd-mobile';
import { FormattedMessage} from 'react-intl';

const RadioItem = Radio.RadioItem;

class App extends React.Component {
    constructor(props) {
		super(props);
        this.state={errorMap:[]}
    }
    componentDidMount(){

        let data = {
                "start": 55,
                "partner_id": "",
                "name": "create-plan",
                "region": 1,
                "_id": {
                    "$oid": "59beebb72cac7f3bbc83b8b9"
                },
                "action": "create-referred-broker",
                "questions": {
                    "49": {
                        "question": {
                            "placeholder": "My New Investment Plan",
                            "required": true,
                            "region": 1,
                            "_id": 49,
                            "question_slug": "plan_name",
                            "question": "What would you like to name this plan?",
                            "type": "text",
                            "header": "CREATING PLAN"
                        },
                        "children": []
                    },
                    "50": {
                        "question": {
                            "question_slug": "initial_contribution",
                            "required": true,
                            "region": 1,
                            "_id": 50,
                            "description": "It’s more important to invest what you comfortably can now than to wait until you have a larger sum of money.",
                            "question": "How much will you invest now?",
                            "type": "inf_slider",
                            "header": "CREATING PLAN",
                            "parameters": {
                                "number_intervals": 100,
                                "interval": 10,
                                "decrement": true,
                                "selected": 10000
                            }
                        },
                        "children": [
                            {
                                "destination": 51,
                                "conditions": "default"
                            }
                        ]
                    },
                    "51": {
                        "question": {
                            "question_slug": "monthly_contribution",
                            "required": true,
                            "region": 1,
                            "_id": 51,
                            "description": "The more you contribute over time, the faster you can increase gains (change contribution date in settings).",
                            "question": "How much can you comfortably contribute to your investment each month?",
                            "type": "inf_slider",
                            "header": "CREATING PLAN",
                            "parameters": {
                                "number_intervals": 100,
                                "interval": 1,
                                "decrement": true,
                                "selected": 500
                            }
                        },
                        "children": [
                            {
                                "destination": 52,
                                "conditions": "default"
                            }
                        ]
                    },
                    "52": {
                        "question": {
                            "question_slug": "risk_value",
                            "required": true,
                            "region": 1,
                            "_id": 52,
                            "description": "Over the course of this investment, you will likely experience periods of loss. With higher risk plans, you stand to both lose and gain more.",
                            "question": "How much risk would you like to take?",
                            "type": "risk_input_10",
                            "header": "CREATING PLAN",
                            "parameters": {
                                "selected": 0.153
                            }
                        },
                        "children": [
                            {
                                "destination": 49,
                                "conditions": "default"
                            }
                        ]
                    },
                    "55": {
                        "question": {
                            "question_slug": "investment_horizon_date",
                            "required": false,
                            "region": 1,
                            "_id": 55,
                            "description": "Alkanza optimizes your plans for the length of time you would like your money invested. Use the buttons below or enter in a custom date to select the date of maturity for this plan.",
                            "question": "What is your investment horizon?",
                            "type": "investment_horizon_date",
                            "header": "CREATING PLAN",
                            "parameters": {
                                "choices": [
                                    "5 Y",
                                    "10 Y",
                                    "20 Y",
                                    "30 Y"
                                ]
                            }
                        },
                        "children": [
                            {
                                "destination": 50,
                                "conditions": "default"
                            }
                        ]
                    }
                }
        };



const answers = {
  "name": "create-plan",
  "answers": [
    {
      "id": "50",
      "value": 10000.0
    },
    {
      "id": "51",
      "value": 500.0
    },
    {
      "id": "52",
      "value": "{\"index\":15,\"value_at_maturity\":152251.02,\"target_return\":0.25,\"adverse_scenario\":-0.21}"
    },
    {
      "id": "49",
      "value": "My recently created plan"
    },
    {
      "id": "55",
      "value": "2027-11-30"
    }
  ],
  "region_id": "1"
}

let questions = data.questions;
questions = Object.keys(questions).map(el=>questions[el]);
console.log(questions);
this.setState({questions:questions});
		
     }



    onErrorClick=(question)=>{	//点击报错icon出现的提示	        
		const {getFieldError } = this.props.form;
		let msg = getFieldError(question);
		if(msg){			
			T.showError(msg.join(","));
		}	
	}  

    onChangeRadio=()=>{

    }

    scrollChange=()=>{

    }



    render() {

        const questions = this.state.questions;
        const {getFieldProps} = this.props.form;
        return (<div className="health-policy">       
		<div className="health">
        <p className="f30 strong">Questions</p>
       {
            questions && questions.map((item,index)=>
            <div key={index} className="itemWrap">   
            <p className="fc0 strong f30 pl30 pr20 mt30">{item.question.question}</p>    
            <p className="fc6 f26 pl30 pr20 ">{item.question.description}</p>        
                <List>                            
                         {(item.question.type == "text" || item.question.type == "risk_input_10") &&                        
                            <InputItem  key={index} 
                            {...getFieldProps(item.question._id+'',{
                               rules: [{
                                    required: "required",
                                    message:"please input"+ item.question.question,						
						        }]
                            })}		
                            error ={this.state.errorMap[item.key]}
                            onErrorClick={this.onErrorClick.bind(this,item.key)}
                            clear
                            placeholder={item.question.placeholder}
                            labelNumber={4}
                            >answer</InputItem>	                           
                        }      
                        {item.question.type == "inf_slider" &&
                        <div>
                            <Slider
                                style={{ width: "100%" }}
                                defaultValue={item.question.parameters.selected/2}
                                min={0}
                                max={item.question.parameters.selected}
                                step={item.question.parameters.number_intervals}
                                onChange={(value)=>this.scrollChange(value,item.question._id)}
                                trackStyle={{
                                    backgroundColor: '#10c286',
                                    height: '20px',
                                }}
                                railStyle={{
                                    backgroundColor: '#1890FF',
                                    height: '20px',
                                }}
                                handleStyle={{
                                    borderColor: '#1890FF',
                                    height: '30px',
                                    width: '30px',
                                    marginLeft: '-15px',
                                    marginTop: '-4.5px',
                                    backgroundColor: '#1890FF',
                                    zIndex: 99,
                                    opacity: 0.8
                                }}
                            />  
                            <p className="fc0 strong f30 pl30 pr20 mt60 diy_background">1000</p>     
                         </div>                
                        }    
                    {item.question.type == "investment_horizon_date" &&
                         <div className="radioWrap">                           
                            <div className="radioBox">    
                            {item.question.parameters.choices.map((QAdto,index)=>
                                <div key={index} className="radioInner">
                                <span className="rSpan" >{QAdto}</span>                                
                                    <RadioItem  key={item.question._id}   onChange={() => this.onChangeRadio(item.question._id,QAdto)}>
                                    </RadioItem>
                                </div>                              
                            )}
                            </div>    
                         </div>    
                    }             
                </List> 
            </div>           
        )}

        
        
     </div>

     <div className="footer">           
            <div  style={{width:"100%"}}>
                <a href="javascript:;" className="f32  tac fcw diy_background" onClick={this.clickNext}>NEXT</a>
             </div>
     </div>   
			
	  	</div>)
    }

}

const AppForm = createForm()(App);
export default AppForm;